<template>
    <div>
        <div class="txt-container">
            <p class="landIn">Ano hi watashitachi mada shiranai no Fushigi no monogatari desu.</p>
        </div>
        <div class="reveal">sword art online</div>
    </div>
</template>
<script>
export default {
  mounted() {
    // js分割文本，需要再mounted中执行
    this.getTxt()
    this.getReveal()
  },
  methods: {
    getTxt() {
      var landInTexts = document.querySelectorAll('.landIn')
      window.console.log(landInTexts)
      // 可以和下面的方法写成一样的，目前看landInTexts数组只有一个元素
      landInTexts.forEach(landInText => {
        var letters = landInText.textContent.split('')
        landInText.textContent = '' // 将原来的txt清空，否则会有两个txt
        letters.forEach((letter, i) => {
          var span = document.createElement('span')
          span.textContent = letter
          span.style.animationDelay = `${i * 0.05}s`
          landInText.append(span)
        })
      })
    },
    getReveal() {
      var delay = 0.3
      var revealText = document.querySelectorAll('.reveal')
      var letters = revealText[0].textContent.split('')
      revealText[0].textContent = ''
      // filter返回一个数组，取字母的长度的一半
      var middle = letters.filter(e => e !== ' ').length / 2
      letters.forEach((letter, i) => {
        var span = document.createElement('span')
        span.textContent = letter
        span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`
        revealText[0].append(span)
      })
    }
  }
}
</script>
<style lang="scss">
// 此部分控制span样式的代码需为全局样式，否则不能实现
.txt-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at bottom, #e99bdd 0%, #2545e7 100%);
  height: 200px;
  margin-bottom: 20px;
}
.landIn {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.8;
  color: #fff;
  font-family: Lora, Raleway;
  white-space: pre;

  span {
    animation: landIn 2s ease-out 1;
  }
}

.reveal {
  position: relative;
  display: flex;
  color: #6ee1f5;
  font-size: 2em;
  font-family: Raleway, sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: pre;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;

  span {
    opacity: 0;
    transform: scale(0);
    animation: fadeIn 2.4s forwards;
  }

  /*before和after的作用是在文本的前后添加白色竖线*/
  &::before,
  &::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    background: white;
    opacity: 0;
    transform: scale(0);
  }

  &::before {
    left: 50%;
    animation: slideLeft 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
  }

  &::after {
    right: 50%;
    animation: slideRight 1.5s cubic-bezier(0.7, -0.6, 0.3, 1.5) forwards;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideLeft {
  to {
    left: 29%;
    opacity: 1;
    transform: scale(0.9);
  }
}

@keyframes slideRight {
  to {
    right: 29%;
    opacity: 1;
    transform: scale(0.9);
  }
}

@keyframes landIn {
  from {
    opacity: 0;
    transform: translateY(-20%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
<style lang="scss" scoped>
body {
  display: flex;
  height: 100vh;
  justify-content: center;
}

p {
  font-size: 2em;
  font-weight: 600;
}
</style>
